<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">组件类型</div>
      <div class="w-3/4">
        <el-input type="text" disabled v-model="current.component" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">选择字段</div>
      <div class="w-3/4">
        <el-input
          type="text"
          placeholder="用于$('')查询"
          v-model.trim="current.selector"
        />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">功能描述</div>
      <div class="w-3/4">
        <el-input type="text" v-model="current.describe" />
      </div>
    </div>

    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">显示位置</div>
      <div class="w-3/4">
        <el-radio-group v-model="current.componentProps.align">
          <el-radio-button label="flex-start">居左</el-radio-button>
          <el-radio-button label="center">居中</el-radio-button>
          <el-radio-button label="flex-end">居右</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <div class="flex items-center p-10">
      <div class="w-4/5 text-14 font-bold">按钮配置</div>
      <div class="w-1/5">
        <el-link :underline="false" type="primary" @click="addButton"
          >新增</el-link
        >
      </div>
    </div>

    <draggable
      class="drawing-board"
      v-model="current.componentProps.buttonGroups"
      v-bind="{ group: 'column', animation: 200 }"
      tag="div"
      item-key="key"
      :component-data="{ name: 'fade' }"
      @end="onEnd"
    >
      <template #item="{ element: el, index }">
        <div
          class="flex items-center px-10 p-[5px] mb-[5px] border-b border-gray-200"
        >
          <div class="w-2/6 ml-[3px]">
            <el-input type="text" v-model="el.name" />
          </div>
          <div class="w-2/6 ml-[5px]">
            <el-select v-model="el.type" placeholder="请选择按钮类型">
              <el-option label="Primary" value="primary" />
              <el-option label="Default" value="default" />
              <el-option label="Success" value="success" />
              <el-option label="Warning" value="warning" />
              <el-option label="Danger" value="danger" />
              <el-option label="Info" value="info" />
            </el-select>
          </div>
          <div class="w-2/6 text-16 ml-[5px]">
            <el-link class="mr-[5px]" :underline="false" type="primary"
              >编辑</el-link
            >
            <el-link :underline="false" type="danger" @click="removeButton(index)"
              >删除</el-link
            >
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { Component } from "@/components/low-code/core/component";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "actionBarSetting",
  props: ["current"],
  setup(props) {
    const component = props.current as Component;
    let lowCode = component.getLowCodeInstance();

    const addButton = () => {
      component.componentProps.buttonGroups.push({
        type: "default",
        name: "按钮" + (component.componentProps.buttonGroups.length + 1),
      });
    };

    const removeButton = (index: number) => {
      if (component.componentProps.buttonGroups.length == 1) {
        ElMessage.warning("默认一个的按钮");
        return false;
      }
      component.componentProps.buttonGroups.splice(index, 1);
    };


    const onEnd = () => {
      lowCode.updateMetaRefresh();
    };
    return { lowCode, component, onEnd, addButton,removeButton };
  },
});
</script>

<style scoped></style>
